<template>
  <div class="bank">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="题目类型" prop="quType">
        <el-select v-model="ruleForm.quType" placeholder="请选择">
          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="难度等级" prop="remarks">
          <el-select v-model="types" placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
      <el-form-item label="归属题库" prop="repoId">
        <el-select v-model="ruleForm.repoIds" filterable multiple placeholder="请选择归属题库">
          <el-option v-for="item in repoList" :key="item.value" :label="item.title" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目内容" prop="content">
        <el-input type="textarea" v-model="ruleForm.content"></el-input>
      </el-form-item>
      <el-form-item label="试题图片">
        <!-- <XDUpload
          v-model="ruleForm.image"
          :limit="1"
          :mediaOnly="false"
          :multiple="false"
        ></XDUpload> -->
        <ImageUpload @input="upImage" :limit="1"></ImageUpload>
      </el-form-item>
      <el-form-item label="整题解析" prop="analysis">
        <el-input type="textarea" v-model="ruleForm.analysis"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" plain @click="add">添加</el-button>
        <p style="color:red;font-size:16px;">注意:以下为答案选项,选中答案选项为正确答案，不选择为错误答案</p>
        <el-table :data="ruleForm.answerList" style="width: 100%" ref="multipleTable" border>
          <el-table-column width="100" label="是否答案">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isRight">答案</el-checkbox>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="name" label="选项图片" width="180">
            <template slot-scope="scope">
              <ImageUpload v-model="scope.row.image" @input="UploadImage" :limit="1"></ImageUpload>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="content" label="答案内容">
            <template slot-scope="scope">
              <el-input type="textarea" v-model="scope.row.content"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="address" label="答案解析">
            <template slot-scope="scope">
              <el-input type="textarea" v-model="scope.row.analysis"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="80" align="center" prop="address" label="操作">
            <template slot-scope="scope"><el-button type="danger" icon="el-icon-delete" circle
                @click="del(scope.row)"></el-button></template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  questionList,
  questionSave,
  questionDelete,
  questionDetail,
  repositoryList,
} from "@/api/bank";
import { getYearMateTime } from "@/utils/time.js";
import cache from '@/plugins/cache';
export default {
  props:["testObj"],
  data() {
    return {
      options: [
        { label: "普通", value: 1 },
        { label: "较难", value: 2 },
      ],
      repoList: [],
      input: "",
      checked: true,
      dialogVisible: false,
      typeList: [
        { label: "单选题", value: 1 },
        // { label: "多选题", value: 2 },
        // { label: "判断题", value: 3 },
      ],
      types: "",
      ruleForm: {
        resourceId: cache.session.getJSON('deptId'),
        quType: 1,
        repoIds: [],
        image: "",
        content: "",
        analysis: "",
        answerList: [{
          analysis: "",
          content: "",
          image: "",
          isRight: false,
          id: 1,
        }, {
          analysis: "",
          content: "",
          image: "",
          isRight: false,
          id: 2,
        }, {
          analysis: "",
          content: "",
          image: "",
          isRight: false,
          id: 3,
        }, {
          analysis: "",
          content: "",
          image: "",
          isRight: false,
          id: 4,
        }],
        // createTime: "",
        id: null
      },
      rules: {
        quType: [
          { required: true, message: "请选择题目类型", trigger: "change" },
        ],
        repoIds: [
          { required: true, message: "请选择归属题库", trigger: "change" },
        ],
        content: [
          { required: true, message: "请输入题目内容", trigger: "blur" },
        ],
      },
      tableData: [],
      multipleSelection: [],
      value: "",
      repositoryList: {
        pageSize: 9999,
        currentPage: 1,
        resourceIds: [cache.session.getJSON('deptId'),100],
      },
      answerList: [
        {
          analysis: "",
          content: "",
          image: "",
          isRight: false,
          id: 1,
        },
      ],
      num: 1,
    };
  },
  computed: {
    cipplaceholder() {
      return this.multipleSelection.length
        ? `已选${this.multipleSelection.length}项`
        : "111";
    },
  },
  created() {
    this.getrepositoryList();

    if (Object.keys(this.$props.testObj).length != 0) {
      let obj = { ...obj, ...this.$props.testObj };
     
      this.ruleForm.quType = obj.quType;
      this.ruleForm.repoIds = obj.repoIds;
      this.ruleForm.image = obj.image;
      this.ruleForm.content = obj.content;
      this.ruleForm.analysis = obj.analysis;
      this.ruleForm.answerList = obj.answerList;
      // this.ruleForm.createTime = obj.createTime;
      this.ruleForm.id = obj.id
    }
  },
  methods: {
    UploadImage(e){
      //  console.log(e); 
    },
    upImage(e) {
      this.ruleForm.image = e;
    },
    add() {
      let obj = {
        analysis: "",
        content: "",
        image: "",
        isRight: false,
        id: this.num++,
      };

      this.ruleForm.answerList.push(obj);
    },

    getrepositoryList() {
      repositoryList(this.repositoryList).then((res) => {
        console.log(res);
        this.repoList = res.data.list;
      });
    },
    del(e) {
      this.ruleForm.answerList.forEach((item, index) => {
        if (item.id === e.id) {
          this.ruleForm.answerList.splice(index, 1);
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    submitForm(formName) {
      // let data = new Date().valueOf();
      // this.ruleForm.createTime = getYearMateTime(data);
    
      this.$refs[formName].validate((valid) => {
        if (valid) {
          questionSave(this.ruleForm).then((res) => {
            if (res.success) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.$emit("onShow", 1);
            } else {
              this.$message({
                message: "添加失败",
                type: "warning",
              });
              this.$emit("onShow", 2);
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$emit("onShow", 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.bank {
  width: 100%;
  background: #fff;
  padding: 10px 10px;
  overflow: auto;
  height: 100%;
}
</style>
